<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				原数据：{{datetime}}
			</div>
			<div>
				属性计算改变格式：{{formatDateTime}}
			</div>
			<div>
				<!-- 没有参数小括号可以省略 -->
				调用方法实现：{{getDateTime()}}
			</div>
			<div>
				<!-- 过滤器使用方式一 {{ xxx | 过滤器名}} -->
				<!-- 过滤器可以手动传递参数 -->
				过滤器方式实现：{{datetime | timeFormater('YYYY-MM-DD')}}
			</div>
			<div>
				<!-- v-bind:属性 = "xxx | 过滤器名" -->
				过滤器的使用方式二：<span :time = "msg | spiceMStr"></span>
			</div>
		</div>
		
		<script type="text/javascript">
			// 注册过滤器方式二：全局注册，要在Vue实例对象创建之前注册
			Vue.filter('spiceMStr',function(val){
				return val.slice(0,2)
			})
			const vm = new Vue({
				el: "#root",
				data: {
					datetime: Date.now(),
					msg: 'HelloWorld'
				},
				computed: {
					formatDateTime() {
						return dayjs(this.datetime).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				methods: {
					getDateTime(){
						return dayjs(this.datetime).format('YYYY-MM-DD HH:mm:ss')
					}
				},
				// 注册过滤器方式一
				filters: {
					// 过滤器本质上也是一个函数
					// 第一个参数为要处理的数据
					// 后边可以自定义参数
					timeFormater(val,format = 'YYYY-MM-DD HH:mm:ss'){
						return dayjs(val).format(format)
					}
				}
			})
			
		</script>
	</body>
</html>